<template>
  <div class="container">
    <!-- 我的头部信息 -->
    <myhead :userPhone="phone">
      <template #head-icon>
        <img v-if="phone" src="../../../static/images/mine/user-icon-1x.png" class="head-icon"/>
        <van-icon v-else name="https://b.yzcdn.cn/vant/icon-demo-1126.png" class="head-icon" @click="toLogin()"/>
      </template>
    </myhead>
    <!-- 全部订单 -->
    <allorders></allorders>
    <!-- 服务中心 -->
    <myitem v-for="item in dataList" :key="item.title" :title="item.title">
      <template #leftIcon>
        <img :src="item.imgSrc" class="leftIcon icon" />
      </template>
      <template #rightIcon>
        <img :src="item.iconSrc" class="rightIcon icon" />
      </template>
    </myitem>
  </div>
</template>
<script>
import myhead from "./myHead";
import allorders from "./allorders";
import myitem from "./myitem";
export default {
  components: {
    myhead,
    allorders,
    myitem,
  },
  data() {
    return {
      dataList: [],
      phone: localStorage.getItem("telPhone"),
    };
  },
  mounted() {
    this.$axios
      .get("../../../static/json/my/myService.json")
      .then((res) => {
        this.dataList = res.data;
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
     toLogin() {
      this.$router.push({ path: "/login" }).catch(err => {});
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  background-color: #f8f8f9;
  font-size: 32px;
  height: 1334px;
}

.van-icon__image {
  width: 132px;
  height: 132px;
  object-fit: contain;
}
</style>
